Sidebar Components
Code: CE Credits
HTML
<div class="card card-sidebar">
<p class="ce-credit-value">2 CE</p>
<p>including <span class="ser-credit-value">0.5 SER</span></p>
<a href="#" class="button record-credits">Record CE</a>
<p><a href="#">Manage your Continuing Education credits</a></p>
</div>
<div class="card card-sidebar">
<p class="ce-credit-value">2 CE</p>
<p>including <span class="ser-credit-value">0.5 SER</span></p>
<p class="ce-success">Your CE credits have been recorded.</p>
<p><a href="#">Manage your Continuing Education credits</a></p>
</div>
<div class="card card-sidebar">
<p class="ce-credit-value">2 CE</p>
<p>including <span class="ser-credit-value">0.5 SER</span></p>
<a href="#" class="button record-credits">Record CE</a>
<p class="ce-error">We were not able to record your CE credits. Please try again. Contact us if you continue to see this message.</p>
<p><a href="#">Manage your Continuing Education credits</a></p>
</div>
Code: Additional Information
HTML
<div class="card card-sidebar">
<p class="card-title">Additional Information</p>
<p>Published by Publisher</p>
<p><span class="additional-information">Chapters</span><span class="additional-information">Pages</span></p>
<p>DOI</p>
<p>ISBN-10: 1944960112</p>
<p>ISBN-13: 978-1-56619-909-4</p>
<div>
<strong>Original Publication:</strong>
<p>
<span class="reference-authors">
<span class="reference-author"><span class="reference-last">[LastName]</span><span class="reference-first">[First initial]</span></span>
<span class="reference-author"><span class="reference-last">[LastName]</span><span class="reference-first">[First initial]</span></span>
</span>
<span class="reference-year">[PublicationYear]</span>
<span class="reference-title"><a href="#">[Article / Book / Chapter Title + URLForTitle]</a></span>
<span class="reference-publication">[Title of Journal / Book / Series]</span>
<span class="reference-comment">[Comment]</span>
<span class="reference-volume">
<span class="reference-vol">Vol. [VolumeNumber]</span><span class="reference-no">No. [IssueNumber]</span>
<span class="reference-date">[PublicationDate]</span>
<span class="reference-month">[PublicationMonth]</span>
</span>
<span class="reference-pub">
<span class="reference-edition">[EditionNumber]</span>
<span class="reference-location">[PublisherLocation]</span><span class="reference-publisher">[PublisherName]</span>
</span>
<span class="reference-pages">[PageRange]</span>
<span class="reference-doi">DOI:[DOI]</span>
<span class="reference-annotation">[Annotation]</span>
</p>
</div>
</div>
Code: Media Contact
HTML
<div class="card card-sidebar">
<p class="card-title">Media Contact</p>
<div class="media-contact">
<div class="media-contact-name h5">Person: First Name Person: Last Name</div>
<div class="media-contact-title">Person: Job Title</div>
<div class="media-contact-phone"><a href="#">Person: Phone Number</a></div>
<div class="media-contact-email"><a href="#">Person: email address</a></div>
</div>
<div class="media-contact">
<div class="media-contact-name h5">Grace Dusseau</div>
<div class="media-contact-title">Director, Corporate Communications EMEA</div>
<div class="media-contact-phone"><a href="tel:+4402073309551">+44 (0) 20-7330-9551</a></div>
<div class="media-contact-email"><a href="mailto:[email protected]">[email protected]</a></div>
</div>
</div>
Documentation
Problem Being Solved
Additional information needs to be displayed for an article.
When to Use
This pattern is used to display metadata such as CE credits, topics, or original publication information.
When Not to Use
This pattern is only used on page-level structures such as article.
Formatting
- Headers are in a tag with "card-title" class.
- Generally, each line of body should be in a block level element.
- References in the sidebar are structured slightly different to accomodate the additional metadata or original citation components.
- Record CE Button should be a link to the manage credits page in case JS fails.